<template>
	<view class="pages">
		<view class="cu-form-group margin-top border-botttom" style="margin: 0;">
			<view class="title">手机号码</view>
			<input placeholder="请输入11位手机号码" name="input" type="number" maxlength="11" v-model="FormData.phone"
				@input="change"></input>
		</view>
		<view class="cu-form-group border-botttom">
			<view class="title">验证码</view>
			<input placeholder="请输入短信验证码" name="input" type="number" style="padding-left: 16px;" @input="change"
				v-model="FormData.Code"></input>
			<button class='cu-btn bg-green' @tap="sending">{{sendText}}</button>
		</view>
		<view class="cu-form-group margin-top border-botttom">
			<view class="title">登录密码</view>
			<input placeholder="请输入登录密码" name="input" type="password" maxlength="11" v-model="FormData.pasword"
				@input="change"></input>
		</view>
		<view class="cu-form-group margin-top border-botttom">
			<view class="title">再次确认</view>
			<input placeholder="请再次输入登陆密码" name="input" type="password" maxlength="11" v-model="FormData.paswords"
				@input="change"></input>
		</view>
		<view class="bottom-title">
			<!-- <view class="imgDui">
				<image src="https://img.aibbyp.com/wechat/newImg/fangxing.png" mode=""></image>
			</view> -->
			<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause"
				@change="CheckboxChange">
				<checkbox class="orange" :class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false"
					value="2" />
			</checkbox-group>
			<agreement></agreement>
		</view>
		<button class="cu-btn block bg-blue margin-tb-sm lg loginBtn" :disabled="disabled" @tap="login">下一步</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				FormData: { // 表单验证
					phone: '',
					Code: '',
					pasword: '',
					paswords: '',
				},
				sendText: '获取验证码',
				disabled: true,
				checked: undefined
			}
		},
		watch: {

		},
		onLoad() {
			this.FormData.phone = uni.getStorageSync("wanlshop:user").mobile || ''
		},
		methods: {
			CheckboxChange(e) {
				this.checked = e.detail.value[0];
			},
			sending() { //获取验证码
				let that = this
				if (this.FormData.phone.length >= 11) {
					if (this.sendText != '获取验证码') {
						uni.showToast({
							title: '请勿重新获取',
							duration: 500,
							icon: "none"
						});
					} else {
						this.$api.get({
							url: '/sms/send',
							data: {
								event: 'resetpwd',
								mobile: this.FormData.phone
							},
							success: res => {
								uni.showToast({
									title: '发送成功',
									duration: 800,
									icon: "none"
								});
								let timer_num = 60;
								let timeClock = setInterval(function() {
									timer_num--;
									that.sendText = timer_num + '秒后重新发送'
									if (timer_num == 0) {
										clearInterval(timeClock);
										that.sendText = '重新发送'
									}
								}, 1000)
							}
						});
					}
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						duration: 500,
						icon: "none"
					});
				}
			},
			change(e) { //input 框输入事件
				if (this.FormData.phone && this.FormData.Code && this.FormData.pasword && this.FormData.paswords) {
					this.disabled = false
				} else {
					this.disabled = true
				}
			},
			login() { // 用户找回密码
				if (!this.FormData.phone) {
					uni.showToast({
						title: '请输入手机号',
						duration: 500,
						icon: "none"
					});
					return
				}
				if (!this.FormData.Code) {
					uni.showToast({
						title: '请输入验证码',
						duration: 500,
						icon: "none"
					});
					return
				}
				if (!this.FormData.pasword) {
					uni.showToast({
						title: '请输入登陆密码',
						duration: 500,
						icon: "none"
					});
					return
				}

				if (!this.FormData.pasword) {
					uni.showToast({
						title: '请再次输入登陆密码',
						duration: 500,
						icon: "none"
					});
					return
				}
				if (this.checked == undefined) {
					uni.showToast({
						title: '请勾选用户协议',
						duration: 500,
						icon: "none"
					});
					return
				}
				this.$api.post({
					url: '/wanlshop/user/resetpwd',
					data: {
						captcha: this.FormData.Code,
						mobile: this.FormData.phone,
						newpassword: this.FormData.paswords
					},
					success: res => {
						console.log(res, '------注册成功')
						uni.showToast({
							title: '重置密码成功',
							duration: 500,
							icon: "none"
						});
						setTimeout(() => {
							uni.navigateBack({})
						}, 500)
					},
					fail: res => {
						uni.showToast({
							title: '重置密码失败',
							duration: 500,
							icon: "none"
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.pages {
		background: #FFF;
		height: 95vh;
		padding: 0 16px;

		.loginBtn {
			width: 350px;
			height: 43px;
			border-radius: 4px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 10px;
			gap: 10px;
			font-family: Source Han Sans;
			font-size: 16px;
			color: #FFF;
			font-weight: 500;
			background: linear-gradient(108deg, #FF5E4C 16%, #FD3E28 51%, #FD2B13 80%);
			box-shadow: 0px 4px 10px 0px rgba(254, 43, 19, 0.3);
		}

		.border-botttom {
			margin-top: 30rpx;
			border-top: none;
			border-bottom: 0.5px solid #eee;

			.title {
				font-family: Source Han Sans;
				font-size: 16px;
				font-weight: 600;
				color: #333333;
			}

			.uni-input-placeholder.input-placeholder {
				font-family: Source Han Sans;
				font-size: 16px;
				font-weight: normal;
				line-height: normal;
				color: #B2B2B2;

			}

			.bg-green {
				background-color: #FFF;
				color: #FF4530;
			}
		}

		.bottom-title {
			display: flex;
			font-size: 12px;
			color: #808080;
			margin-top: 37px;
			margin-bottom: 50px;
		}

		.imgDui image {
			width: 14px;
			height: 14px;
			border-radius: 2px;
			margin-right: 15rpx;
		}

		.shake-horizontal {
			animation-name: shake-horizontal;
			animation-duration: 100ms;
			animation-iteration-count: infinite;
			animation-timing-function: ease-in-out;
			animation-delay: 0s;
			animation-play-state: running;
		}

		.auth-clause checkbox {
			margin-right: 6rpx;
			transform: scale(0.7);
		}



		.auth-clause text {
			margin: 0 10rpx;
			color: #ED6D0F;
		}



	}
</style>